<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>ajax</title>
	<style type="text/css">
		* {
		    box-sizing: border-box;
		    margin: 0;
		    padding: 0
		}
		.nav_wrap{
		    overflow-x: scroll;
		}
		.nav_mine {
		    padding: 15px 10px;
		    border-bottom: 1px solid #aca9a7;
		    height: 75px;
		    overflow-x: scroll;
		    overflow-y: hidden;
		}
		.nav_mine .nav_item {
		    border: 1px solid #1a110b;
		    border-radius: 40px;
		    color: #aca9a7;
		    margin-right: 10px;
		    font-size: 24px;
		    padding: 4px 18px;
		    float: left;
		    list-style: none;
		}
	</style>
</head>
<body>
	<div class="nav_wrap">
	    <ul class="nav_mine">
	        <li class="nav_item">全部</li>
	        <li class="nav_item">首页1</li>
	        <li class="nav_item">首页2</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	        <li class="nav_item">首页</li>
	    </ul>
	</div>
	<script src="animate动画演示/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
		    var width = 0;
		    for (var i = 0; i < $('.nav_item').length; i++) {
		        width += $('.nav_item').eq(i).outerWidth(true);
		    }
		    $('.nav_mine').width(width+20);  //width只是内容的宽度，需要加上padding的宽度
		})
	</script>
</body>
</html>